<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Module 是day13_02 -->
		<title>day13_02 RestFul方法传参</title>
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			/* 函数名开头不能是数字 */
			// function e_fn_fi(){
			// 	$.ajax({
			// 		url:"http://localhost:8080/car/add1",
			// 		data:$("#8_form1").serialize(),
					
			// 		success:function(data){
			// 			console.log("success");
			// 			$("#8_h5_1").text(JSON.stringify(data));
			// 			console.log(data);
			// 		},
			// 		error:function(data){
			// 			console.log("error");
			// 			$("#8_h5_1").text(JSON.stringify(data));
			// 			console.log(data);
			// 		}
					
			// 	})
			// }
			function e_fn_fi(){
				// //注意用val()获取input提交的值 用text()不行
				// html()text()用于元素的html内容/文本内容的修改和获取
				// val()用于表单元素的value字段值修改和获取
				// 上面三个只有val()可以用于input元素
				$.ajax({
					url:"http://localhost:8080/car/add1",//url http:后面不要忘记//
					data:$("#8_form1").serialize(),
					
					// 上面这句等价于下面这一段
					// data:{
					// 	"id":$("#8_form1 input[name='id']").val(),
					// 	"name":$("#8_form1 input[name='user']").val(),
					// 	"color":$("#8_form1 input[name='color']").val(),
					// 	"price":$("#8_form1 input[name='price']").val(),
					// 	"type":$("#8_form1 input[name='type']").val(),
					// 	"date":$("#8_form1 input[name='date']").val()
					
					// },
					
					success:function(data){//不要忘记写data参数 此处的data是return的
						console.log("success");
						$("#8_h5_1").text(JSON.stringify(data));
						console.log($("#8_form1 input[name='id']").val());
						console.log("data的类型："+typeof(data));
					},
					error:function(data){//不要忘记写data参数
						console.log("error");
						$("#8_h5_1").text(JSON.stringify(data));
					}
					
				})
			}
			function e_fn_se(){
				$.ajax({
					url:"http://localhost:8080/car/add1",
					data:$("#8_form1").serialize(),
					
					success:function(data){
						$("#8_h5_2").text(JSON.stringify(data));
						console.log("success");
					},
					error:function(data){
						$("#8_h5_2").text(JSON.stringify(data));
						console.log("error");
					}
					
					
				})
			}
			function e_fn_thi(){
				$.ajax({
					url:"http://localhost:8080/car/add1",
					data:$("#8_form1").serialize(),
					
					success:function(data){
						$("#8_h5_3").text(JSON.stringify(data));
						console.log("success");
					},
					error:function(data){
						console.log("error");
					}
					
					
				})
			}
			function e_fn_fou(){
				$.ajax({
					url:"http://localhost:8080/car/add1",
					data:$("#8_form1").serialize(),
					
					success:function(data){
						$("#8_h5_4").text(JSON.stringify(data));
						console.log("success");
					},
					error:function(data){
						console.log("error");
					}
					
				})
			}
			function e_fn_fif(){
				$.ajax({
					url:"http://localhost:8080/car/add1",
					data:$("#8_form1").serialize(),
					success:function(data){
						$("#8_h5_5").text(JSON.stringify(data));
						console.log("success");
					},
					error:function(data){
						
					}
					
				})
			}
			function test1(){
				$.ajax({
					url:"http://localhost:8080/car/test1",
					data:$("#8_form1").serialize(),
					success:function(data){
						$("#8_h5_6").text(JSON.stringify(data));
						console.log("success");
					},
					error:function(data){
						console.log("error");
					}
					
				})
			}
			
		</script>
	</head>
	<body>
		<!-- 请求方式测试 get RestFul -->
		<table border="0" cellpadding="7px" cellspacing="0">
			<tr>
				<td>

					<a href="http://localhost:8080/car/insert/1/2">缺少参数 insert/1/2</a><br />
				</td>
			</tr>
			<tr>
				<td>

					<a href="http://localhost:8080/car/insert/1/2/3">insert/1/2/3</a><br />
				</td>
			</tr>
			<tr>
				<td>

					<a href="http://localhost:8080/car/insert/1/2/3/4">太多参数 insert/1/2/3/4</a><br />
				</td>
			</tr>
			<tr>
				<td>

					<a href="http://localhost:8080/car/get">get</a><br />
				</td>
			</tr>
			<tr>
				<td>

					<a href="http://localhost:8080/car/add?id=10&name=BMW&price=9.9">add?id=10&name=BMW&price=9.9</a><br />
				</td>
			</tr>
			<tr>
				<td>

					<a href="http://localhost:8080/car/add1?id=1&name=jbjc&type=Benz">add1?id=1&name=jbjc&type=Benz</a><br />
				</td>
			</tr>
			<tr>
				<td>
					<a href="http://localhost:8080/car/add2/11">add2/11</a>
				</td>

			</tr>
			<tr>
				<td>
					<a href="http://localhost:8080/car/add2/1?name=BMW&price=9.9">add2/1?name=BMW&price=9.9</a>
				</td>

			</tr>
			<tr>
				<td>
					<a href="http://localhost:8080/car/insert/1/jbjc/Benz">insert/1/jbjc/Benz</a>
				</td>
			</tr>


		</table>


		<h5 id="8_h5_1">这是8_h5_1标签，提交的数据将要以json串的形式显示在这里</h5>
		<h5 id="8_h5_2">这是8_h5_2标签，提交的数据将要以json串的形式显示在这里</h5>
		<h5 id="8_h5_3">这是8_h5_3标签，提交的数据将要以json串的形式显示在这里</h5>
		<h5 id="8_h5_4">这是8_h5_4标签，提交的数据将要以json串的形式显示在这里</h5>
		<h5 id="8_h5_5">这是8_h5_5标签，提交的数据将要以json串的形式显示在这里</h5>
		<h5 id="8_h5_6">这是8_h5_6标签，提交的name将要以json串的形式显示在这里</h5>
		<h6>下面是ajax访问add1</h6>
		<form action="#" method="post" id="8_form1">
			<table>
				<tr>
					<td>
						id:
					</td>
					<td>
						<input type="text" name="id" />
					</td>
				</tr>
				<tr>
					<td>
						user:
					</td>
					<td>
						<input type="text" name="user" />
					</td>
				</tr>
				<tr>
					<td>
						color:
					</td>
					<td>
						<input type="text" name="color" />
					</td>
				</tr>
				<tr>
					<td>
						type:
					</td>
					<td>
						<input type="text" name="type" />
					</td>
				</tr>
				<tr>
					<td>
						price:
					</td>
					<td>
						<input type="text" name="price" />
					</td>
				</tr>
				<tr>
					<td>
						date:
					</td>
					<td>
						<input type="date" name="date" />
					</td>
				</tr>

				<tr>
					<td colspan="2">

						<input type="button" value="保存" onclick="e_fn_fi();" /><!--  -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
				
						<input type="button" value="保存2" onclick="e_fn_se();" /><!--  -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
				
						<input type="button" value="保存3" onclick="e_fn_thi();" /><!--  -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
				
						<input type="button" value="保存4" onclick="e_fn_fou();" /><!--  -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
				
						<input type="button" value="保存5" onclick="e_fn_fif();" /><!--  -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
				
						<input type="button" value="保存6" onclick="test1();" /><!--  -->
					</td>
				</tr>
				

			</table>

		</form>
	</body>
</html>
